<template>
	<div class="head">
		<div>
			<div class="left">
				<span id="name">LULU 乐享</span>
				<div style="display:flex;margin-right:50px;align-items:center;">
					<el-menu :router=true menu-trigger="click" mode="horizontal">
						<el-menu-item index="/home">首页</el-menu-item>
						<el-menu-item index="/store/all">知识库</el-menu-item>
					</el-menu>
					<!-- <div>
						<el-input placeholder="请输入查找的内容" size="small" v-model="keywords">
							<el-button slot="append" icon="el-icon-search"></el-button>
						</el-input>
					</div> -->
					<el-button size="small" round="round" type="primary" @click="createStore" v-if="user.userAuth == 1">创建知识库</el-button>
					<el-dropdown class="mypic" @command="handleCommand">
						<img :src="user.face" v-if="user.face">
						<img :src="imgsrc" v-else>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="user">个人中心</el-dropdown-item>
							<el-dropdown-item command="mes">
								消息<el-badge class="mark" :value="mesLength" :max="10" v-if="mesLength > 0"/></el-dropdown-item>
							<el-dropdown-item command="star">收藏夹</el-dropdown-item>
							<el-dropdown-item command="exit">退出登录</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>

			</div>
			<!-- <div class="right">
				<el-button round @click="logout" type="text" size="small">退出登录</el-button>
			</div> -->
		</div>
		<addStoreDialog visible v-if="showAddStore" @closeDialog="closeDialog"/>
	</div>
</template>

<script>
import { getnoreadmesLength } from '../../api/api';
import addStoreDialog from '../store/addStoreDialog.vue';
export default {
	name: 'homehead',
	components:{
		addStoreDialog
	},
	data() {
		return {
			user: JSON.parse(window.sessionStorage.getItem('user')),
			keywords:'',
			showAddStore:false,
			mesLength:'',
		}
	},
	methods: {
		handleCommand(command) {
			if (command === 'user') {
				this.$router.push('/userInfo/'+this.user.id);
			} else if (command === 'mes') {
				this.$router.push('/message');
			} else if(command === 'star'){
				this.$router.push('/star')
			}else {
				this.logout();
			}
		},
		logout() {
			this.$confirm('此操作将注销登录, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				//清空用户信息
				this.clearCookie('Authorization');
				window.sessionStorage.removeItem('user');
				//清除vuex中保存的路由，这样保证路由一直是当前用户拥有的
				this.$router.replace('/login')

			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消'
				});
			});

		},
		createStore(){
			this.showAddStore = true;
		},
		closeDialog(){
			this.showAddStore = false;
		}
	},
	created(){
		getnoreadmesLength().then(res=>{
			this.mesLength = res.data.count
		})
	}
}
</script>

<style scoped="scoped">
html {
	padding: 0;
	font-size: 15px;
}

.head {
	border-bottom: 2px solid #e6e6e6;
}

.mypic {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid #e7e7e7e2;
	display: flex;
	overflow: hidden;
	margin-top: 3px;
	margin-left: 100px;
}

.mypic:hover {
	cursor: pointer;
}

.user {
	display: none;
}

.mypic:hover .user {
	display: block;
}

#name {
	color: rgb(255, 255, 255);
	width: 200px;
	text-align: center;
	font-size: 18px;
	display: inline-block;
	font-weight: 600;
	font-family: "DM Sans", sans-serif;
	line-height: 50px;
}

.username {
	color: #dbeff3 !important;
	font-size: 13px;
	display: block;
	width: 100%;
	text-align: center;
	margin-top: 70px;
	margin-bottom: 10px;
}

.left {
	background-color:rgba(30, 128, 255, 0.807);
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 50px;
	justify-content: space-between;
}

.el-menu {
	height: 50px;
	line-height: 50px;
	background: none;
	margin-right: 50px;
}

.el-menu--horizontal>.el-menu-item {
	height: 50px;
	line-height: 50px;
}
.el-menu--horizontal>.el-menu-item{
	color:#fff;
}
.el-menu.el-menu--horizontal {
	border: none;
}

::v-deep .el-submenu__title:hover,
.el-menu-item:focus,
.el-menu-item:hover {
	background-color: #61a2d3 !important;
	color: #fff;
}
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover{
	color: #fff
}
.el-menu--horizontal>.el-menu-item.is-active{
	border-bottom: 1px solid rgb(177, 255, 234);
	color: rgb(145, 255, 242);
}
.el-button{
	margin-left:30px;
	background-color:rgb(50, 117, 175);
}
</style>
